import type { CSSProperties, ReactNode } from 'react';
import styles from './style.less';

interface IConfigItemProps {
  id: string;
  title: string;
  contentStyle?: CSSProperties;
  subTitle?: ReactNode;
  require?: boolean;
}

const ConfigItem: React.FC<IConfigItemProps> = ({
  id,
  title,
  subTitle,
  require,
  contentStyle,
  children,
}) => {
  return (
    <div className={styles['rule-config-item']}>
      <div id={id} className={styles['rule-config-title']}>
        {require && <span className={styles['rule-config-require']}>*</span>}
        <span>{title}</span>
        {subTitle}
      </div>
      <div className={styles['rule-config-form']} style={contentStyle}>
        {children}
      </div>
    </div>
  );
};

export default ConfigItem;
